<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: grid;
            height: 400px;
            /* grid-template-columns: 100px 100px 100px; */
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 1px;
            row-gap: 2px;
        }

        .box {
            background-color: #777;
        }

        .content {
            min-height: 100vh;
            display: grid;
            /* grid-template-columns: 300px 300px;  */
            /* 每列宽多少 */
            grid-template-columns: 300px 1fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "navbar navbar"
                "sidebar main"
                "sidebar footer";
        }

        nav {
            top: 0px;
            position: sticky;
            grid-area: navbar;
            background-color: blue;
            color: white;
            padding: 1em;
        }

        aside {
            height: calc(100vh - 51.33px);
            position: sticky;
            top: 51.33px;
            align-self: start;
            grid-area: sidebar;
            background-color: grey;
        }

        main {
            grid-area: main;
        }

        footer {
            grid-area: footer;
            background: black;
            color: white;
            padding: 2em;
        }

        @media(max-width: 800px) {
            .content {
                grid-template-columns: 1fr;
            }

            aside {
                position: fixed;
                width: 300px;
                display: none;
            }

            .show {
                display: block;
            }
        }

        .main {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 100vh;
            padding: clamp(10px, 5vw, 20px) clamp(5%, 9%, 15%);
            background: linear-gradient(to right,#e2e2e2,#c9d6ff);
            color: #333;
            text-align: center;
        }
        .main .heading{
            font-size: clamp(24px, 5vw, 40px);
            margin-bottom: clamp(10px, 3vw, 20px);
        }
        .main .wrapper{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(300px, calc(50% - 10px)), 1fr));
            gap: clamp(10px, 2vw, 20px);
        }
        .wrapper .item{
            padding: clamp(15px, 3vw, 30px) clamp(10px, 2vw, 20px);
            background: #fff;
            border-radius: 10px;
            transition: .5s;
        }
        .wrapper .item:hover{
            transform: scale(1.03);
            box-shadow: 0 0 20px rgba(0,0,0,.2);
        }
        .item i{
            font-size: clamp(30px, 6vw, 60px);
            color: #7494ec;
        }
        .item h2{
            font-size: clamp(18px, 4vw, 25px);
        }
        .item p{
            margin: clamp(5px, 2vw, 10px) 0 clamp(9px, 3vw, 18px);
            font-size: clamp(14px, 2vw, 16px);
        }
        .item .btn{
            display: inline-block;
            padding: clamp(6px, 1.5vw, 8px) clamp(15px, 2vw, 20px);
            background: #7494ec;
            border: 2px solid #7494ec;
            border-radius: 6px;
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            transition: .5s;
            font-size: clamp(14px, 2vw, 16px);
        }
        .item .btn:hover{
            background: transparent;
            color: #7494ec;
        }
        @media screen and (max-width: 992px) {
            .main{
                padding: 20px 5%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="content">
        <nav><button onclick="toggleSidebar()">Button</button> Navbar</nav>
        <aside id="sidebar">Sidebar</aside>
        <main>
            <h1>Hello World</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, quidem. What did you
                mean do you like me I really want to know what you mean by that.
            </p>
        </main>
        <footer>Footer</footer>
    </div>
    <div class="main">
        <h1 class="heading">My Services</h1>
        <div class="wrapper">
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
            <div class="item">
                <i class="">0</i>
                <h2>Web Development</h2>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Fugit explicabo
                </p>
                <a href="" class="btn">Read More</a>
            </div>
        </div>
    </div>
</body>
<script>
    const sidebar = document.getElementById('sidebar')
    function toggleSidebar() {
        sidebar.classList.toggle('show')
    }
</script>

</html>